<template>
  <div class="lookDetails">
    <!-- 引入头部组件 并修改内容 -->
    <div class="header_box">
      <header1View>
        <template v-slot:left>
          <div class="title_left">
            <van-icon name="arrow-left"
                      class="icon"
                      @click="back" />
          </div>
        </template>
        <template v-slot:center>
          <div class="title_center">
            订单详情
          </div>
        </template>
      </header1View>
    </div>
    <div class="content">
      <!-- 图片 标题 -->
      <div class="pic_title">
        <div class="pic"><img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png"
               alt=""></div>
        <div class="title"
             @click="toOrderDetail">
          <div>烤肉两人套餐烤肉两人套餐</div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <!-- 使用记录 -->
      <div class="use">
        <h4 class="Weight">使用记录</h4>
        <ul>
          <li>2022-06-08 12:20:10 使用1份</li>
          <li>2022-06-29 12:20:10 使用1份</li>
        </ul>
      </div>
      <!-- 退款记录 -->
      <div class="refund">
        <h4 class="Weight">退款记录</h4>
        <ul>
          <van-cell is-link
                    @click="showPopup">
            <li class="redColor">2022-06-08 12:20:10 申请退款1份</li>
          </van-cell>
          <van-popup v-model="show"
                     round
                     position="bottom"
                     :style="{ height: '70%' }">
            <!-- 退款流程弹窗 -->
            <div class="refundBox">
              <div class="refundTitle">退款详情</div>
              <div class="step">
                <!-- 步骤条 -->
                <van-steps direction="vertical"
                           style="padding: 30px"
                           active-color="#ff6e53"
                           :active="0">
                  <van-step class="stepHeight">
                    <div class="title_time">
                      <div class="stepTitle">退款成功</div>
                      <div style="color:#000">12-07 15:50</div>
                    </div>
                    <div style="color:#999">订单金额已原路退还成功</div>
                  </van-step>
                  <van-step class="stepHeight">
                    <div class="title_time">
                      <div class="step_title"
                           style="color:#000">受理成功</div>
                      <div style="color:#000">12-07 15:30</div>
                    </div>
                    <div style="color:#999">系统受理了本次退款申请</div>
                  </van-step>
                  <van-step class="stepHeight">
                    <div class="title_time">
                      <div class="step_title"
                           style="color:#000">发起申请</div>
                      <div style="color:#000">12-07 15:24</div>
                    </div>
                    <div style="color:#999">顾客发起了退款申请</div>
                  </van-step>
                </van-steps>
              </div>
              <!-- 图片，标题 -->
              <div class="refundPicTitle">
                <div class="refundPic"><img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85_%E6%9C%AA%E4%BB%98%E6%AC%BE/u4649.png"
                       alt=""></div>
                <div class="refundTitle">烤肉两人套餐</div>
              </div>
              <div></div>
              <!-- 退款编号 -->
              <div class="refundOrder">
                <span class="greyColor">退款编号</span>
                <span>1212121212</span>
              </div>
              <!-- 申请件数 -->
              <div class="refundNum">
                <span class="greyColor">申请数量</span>
                <span>2件</span>
              </div>
              <!-- 退款金额 -->
              <div class="refundMoney">
                <span class="greyColor">退款金额</span>
                <span class="redColor">10.8</span>
              </div>
              <!-- 退款原因 -->
              <div class="refundReason">
                <span class="greyColor">退款原因</span>
                <span>点错菜了、点多了</span>
              </div>
              <!-- 退款方式 -->
              <div class="refundMethod">
                <span class="greyColor">退款方式</span>
                <span>原路退还</span>
              </div>
            </div>
          </van-popup>
          <van-cell is-link
                    @click="showPopup">
            <li class="redColor">2022-06-08 12:20:10 申请退款1份</li>
          </van-cell>
        </ul>
      </div>
      <!-- 过期记录 -->
      <div class="invalid">
        <h4 class="Weight">过期记录</h4>
        <ul>
          <li>2022-06-30 23:59:59 过期10份</li>
        </ul>
      </div>
    </div>
  </div>

</template>

<script>
import header1View from '../../components/header1View'
export default {
  data () {
    return {
      show: false,//弹框默认隐藏
    }
  },
  components: {
    header1View
  },
  methods: {
    //跳转到订单详情页面
    toOrderDetail () {
      this.$router.push('./DetailGroupBuy')
    },
    // 点击显示弹窗
    showPopup () {
      this.show = true;
    },
  }

}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
.lookDetails {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 14px;
}
.title_center {
  width: 100px;
  margin: 0 auto;
  align-items: center;
}
.icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -8px;
}
.content {
  margin: 15px;
}
.pic_title {
  display: flex;
}
.pic img {
  width: 70px;
  height: 70px;
}
.title {
  line-height: 70px;
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
}

.pic_title,
.use,
.refund,
.invalid {
  padding: 10px;
  background-color: #fff;
  margin-top: 15px;
  border-radius: 10px;
}
li::before {
  content: "\2022  ";
  display: inline-block;
  font-size: 22px;
  margin-right: 5px;
}
.refund li::before {
  color: #000;
}
.refund .van-icon-arrow:before {
  color: #000;
}
.Weight {
  height: 30px;
  line-height: 30px;
}
.redColor {
  color: red;
}
::v-deep .van-overlay {
  background-color: rgba(67, 66, 66, 0.5);
}
.refundBox {
  padding: 15px;
}
.refundTitle {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
}
.title_time {
  display: flex;
  height: 40px;
  justify-content: space-between;
}
.stepHeight {
  margin-bottom: 10px;
}
.step_title {
  font-size: 16px;
}
.stepTitle {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}
::v-deep .step .van-icon-checked:before {
  font-size: 18px;
}
::v-deep .step .van-step__circle {
  background-color: #ff6e53;
}
::v-deep .step .van-step--vertical .van-step__line {
  background-color: #ff6e53;
}
.refundPicTitle {
  display: flex;
  height: 70px;
  margin-bottom: 10px;
}
.refundTitle {
  margin-left: 10px;
  font-size: 14px;
}
.refundOrder,
.refundNum,
.refundMoney,
.refundReason,
.refundMethod {
  padding-top: 10px;
  height: 30px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
}
.refundOrder span,
.refundNum span,
.refundMoney span,
.refundReason span,
.refundMethod span {
  display: inline-block;
}
.greyColor {
  color: #888787;
}
</style>